<template>
  <div>
    <h2>hello vue3</h2>
    <h3>变量监听</h3>
    <input type="text" v-model="name">
    <div>watchName: {{watchName}}</div>

    <br>

    <h3>对象监听</h3>
    <input type="text" v-model="obj.name">
    <div>watchObjName: {{watchObjName}}</div>

    <br>

    <h3>immediate 和 handler</h3>
    <input type="text" v-model="name1">
    <div>watchName1: {{name1}}</div>

    <br>

    <h3>deep</h3>
    <input type="text" v-model="userinfo.username">
    <pre>{{userinfo}}</pre>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';


@Options({
  components: {
  },
  data() {
    return {
      name: '',
      watchName: '',

      obj: {
        name: ''
      },
      watchObjName: '',

      name1: '',
      watchName1: '',

      userinfo: {
        username: ''
      },
    }
  },
  watch: {
    // name(val) {
    //   this.watchName = this.name
    // },
    name: 'nameChange',

    'obj.name': 'objChange',

    name1: {
      handler(val) {
        this.watchName1 = val
      },
      immediate: false
    }
  },
  methods: {
    nameChange() {
       this.watchName = this.name
    },
    objChange() {
      this.watchObjName = this.obj.name
    }
  }
})
export default class App extends Vue {}
</script>

<style lang="scss">

</style>
